<template>
  <div class="auth-userinfo" v-if="isShow">
    <div class="panel">
      <div class="panel-bd">
        <div class="pd-l">
          为了更好的用户体验，请允许使用微信头像和昵称
        </div>
      </div>
      <div class="panel-ft" style="padding: 7px 0;">
        <button open-type="getUserInfo" @getuserinfo="bindGetUserInfo" class="fs-3">继续</button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  data () {
    return {
      isShow: false
    }
  },
  computed: {
  },
  mounted () {
    setTimeout(() => {
      this.isShow = true
    }, 200)
  },
  methods: {
    ...mapActions([
      'getUserInfo'
    ]),
    async bindGetUserInfo ({mp: { detail: {encryptedData, iv} }}) {
      this.getUserInfo({encryptedData, iv})
    }
  }
}
</script>

<style scoped lang="less">
@import '../assets/less/var.less';

.auth-userinfo {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .4);
  left: 0;
  top: 0;
  z-index: 11000;
}
.panel {
  position: absolute;
  width: 70%;
  background-color: @colorWhite;
  left: 15%;
  top: 30%;
  border-radius: @size-xs;
  overflow: hidden;
  text-align: center;
  &-hd {
    border-bottom: 1px solid @colorBorder;
    padding: @size;
    font-weight: bold;
  }
  &-bd {
    padding: @size;
    font-size: 17px;
    border-bottom: 1px solid #eee;
  }
  &-ft {
    button {
      background: none;
      border: none;
      padding: 0;
      font-size: @fs;
      color: @colorPrimary;
      &:after {
        border: none;
        padding: 0;
      }
    }
  }
}

</style>
